import React, { useMemo, useRef } from "react";
import styled from "styled-components";
import "./index.scss";
import {
  REGISTER_MONEY,
  TOWN_STREET,
  COMPANY_LEVEL,
  COMPANY_TYPE,
} from "./data.js";
import useReducer from "src/hooks/useReducer";
import SelectItem from "./components/SelectItem";
import { MinusCircleOutlined } from "@ant-design/icons";
const BackgroundStyle = styled.div`
  > div {
    margin-bottom: 10px;
  }
  .demo1 {
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, #fff 0%, #ffc107 50%, #ffc107 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  .demo2 {
    width: 300px;
    height: 150px;
    background-color: pink;
    clip-path: polygon(
      0 20%,
      60% 20%,
      60% 0%,
      100% 50%,
      60% 100%,
      60% 80%,
      0 80%
    );
  }
`;

// 小demo2
const labelMapProperty = {
  qylx: "企业类型",
  zczb: "注册资本",
  sszj: "所属镇街",
  qydj: "企业等级",
};
const labelList = Object.values(labelMapProperty);
const labelParamsMapProperty = {
  [labelMapProperty.qylx]: {
    option: COMPANY_TYPE,
    mode: "multiple",
  },
  [labelMapProperty.zczb]: {
    option: REGISTER_MONEY,
  },
  [labelMapProperty.sszj]: {
    option: TOWN_STREET,
    mode: "multiple",
  },
  [labelMapProperty.qydj]: {
    option: COMPANY_LEVEL,
    mode: "multiple",
  },
};
const refDefualtData = {
  filterData: {},
};
Object.keys(labelParamsMapProperty).forEach((item) => {
  refDefualtData[item] = {
    labelName: undefined,
  };
});
const DemoPage = () => {
  const refSaveData = useRef(refDefualtData);
  const [state, dispatch] = useReducer({ filterList: [] });
  const { filterList } = state;

  const formList = useMemo(() => {
    return labelList.map((item) => {
      const option = labelParamsMapProperty[item].option;
      return {
        label: item,
        mode: labelParamsMapProperty[item].mode,
        option: option,
      };
    });
  }, []);
  // 改变搜索条件
  const changeActive = (values, label) => {
    refSaveData.current[label].labelName = values;
    refSaveData.current[label].changeActive = changeActive
    const data = refSaveData.current;

    search && search(data);
  };
  // 高级筛选查找数据
  const search = (value) => {
    
    refSaveData.current.filterData = value;
    const { filterData } = refSaveData.current;
    const filterArr = Object.keys(filterData);
    const filterList = [];
    filterArr.forEach((item) => {
      filterList.push({
        labelName: filterData[item].labelName,
      });
    });
    dispatch({
      filterList,
    });
  };
  
  const deleteHandle =(item,index) => {
        
        const {filterData} = refSaveData.current;
        Object.keys(filterData).forEach( item => {
            const { labelName,changeActive} = refSaveData.current.filterData[item];
            if(labelName  && changeActive){
                labelName.splice(index,1)
               changeActive(labelName,item)
           }
        })
       
  }
  console.log('filterList',filterList)
  return (
    <div className="demo-page">
      <BackgroundStyle>
        <div className="demo1"></div>
        <div className="demo2"></div>
      </BackgroundStyle>
      <div
        style={{ background: "#fff", height: "fit-content", padding: "20px" }}
      >
        {formList.map((item) => {
          return (
            <SelectItem
              key={item.label}
              label={item.label}
              mode={item.mode}
              option={item.option}
              changeActive={changeActive}
            />
          );
        })}
        <div className="selectAcutive">
          <span>根据已选条件</span>
          <div className="selected">
            {filterList.map((item, i) => {
              return (
                <span key={i} >
                  {item.labelName &&
                    item.labelName.map((labelName, index) => {
                      return (
                        <span key={index} className="label">
                          {labelName}
                          <MinusCircleOutlined className="delete" onClick={ () => deleteHandle(item,index)} />
                        </span>
                      );
                    })}
                </span>
              );
            })}
          </div>
          <span>为你找到了家企业</span>
        </div>
      </div>
    </div>
  );
};
export default DemoPage;
